<template>
  <div>
    <div class="returnTitle">
      <el-page-header @back="goBack" content="新增测评组合"></el-page-header>
    </div>
    <div class="center">
      <el-form ref="form" :model="form" label-width="120px" label-position="right">
        <el-form-item label="测评组合名称：" class="inputBox">
          <el-input v-model="form.name" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="简介：" class="inputBox">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" maxlength="50" show-word-limit v-model="form.textarea2"> </el-input>
          <p>简介展示在列表</p>
        </el-form-item>
        <el-form-item label="测评量表：">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible = true">添加量表</el-button>
          <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="getOperation"></simple-table>
        </el-form-item>
        <el-form-item label="计划说明：" class="inputBox">
          <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 10}" maxlength="1000" show-word-limit v-model="form.textarea2"> </el-input>
          <p>开始测评组合前，展示给参与测评的人</p>
        </el-form-item>
        <el-form-item class="inputBox">
          <el-button type="primary">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="选择测评" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :close-on-click-modal='false'>
      <span></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import simpleTable from '@/components/simpleTable.vue'
export default {
  components: {
    simpleTable
  },
  data () {
    return {
      form: {},
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:80%', // 表格宽度
        align: 'center',
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'name', name: '名字'},
          {id: 'date', name: '名字1'},
          {id: 'address', name: '名字'},
          {id: 'operation', name: '操作', list: [{id: 'up', name: '上移'}, {id: 'down', name: '下移'}, {id: 'del', name: '删除', className: 'dangerTextBtn'}]}
        ]
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1520 弄'
      }],
      dialogVisible: false
    }
  },
  methods: {
    getOperation (e) {
      if (e.id === 'up') {
        if (e.id === 0) {
          return
        }
        // 在上一项插入该项
        this.tableData.splice(e.index - 1, 0, (this.tableData[e.index]))
        // 删除后一项
        this.tableData.splice(e.index + 1, 1)
      } else if (e.id === 'down') {
        if (e.index === (this.tableData.length - 1)) {
          return
        }
        // 在下一项插入该项
        this.tableData.splice(e.index + 2, 0, (this.tableData[e.index]))
        // 删除前一项
        this.tableData.splice(e.index, 1)
      } else if (e.id === 'del') {
        this.tableData.splice(e.index, 1)
      }
    },
    handleClose (done) {
      done()
    },
    goBack () {}
  }
}
</script>
<style lang="scss" scoped>
@import 'src/assets/style/varibles.scss';
.inputBox{
  width: 40vw;
  p{
    color: $secondaryFontColor;
    font-size: $promptSize;
  }
}
</style>
